import { Table, Input, Button, Popconfirm, Form, Select, Descriptions, Row, Col, DatePicker, message, Typography } from 'antd';
import { getFundCardPayMentList } from '@/services/cardinfor';
import styles from './index.less';

const { Text } = Typography;
const { Option } = Select;
const optionInsure = [
    {
        name: '养老',
        value: '养老'
    },
    {
        name: '失业',
        value: '失业'
    },
    {
        name: '工伤',
        value: '工伤'
    },
    {
        name: '工伤',
        value: '工伤'
    },
    {
        name: '生育',
        value: '生育'
    },
    {
        name: '大病险',
        value: '大病险'
    },
    {
        name: '公积金',
        value: '公积金'
    },
    {
        name: '个税',
        value: '个税'
    },
    {
        name: '残疾人保障金',
        value: '残疾人保障金'
    },
]

class EditableTable extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            dataInsure: [],
            params: {}
        }
    }
    componentWillReceiveProps(nextProps) {
        if (nextProps.accountDetail) {
            this.handleSearch(nextProps.accountDetail.id);
        }
    }
    changeInsure(val, key) {
        const { params } = this.state;
        params[key] = val;
        this.setState({
            params: { ...params }
        })
    }
    changeYear(val) {
        const { params } = this.state;
        params['year'] = val.format('YYYY');
        this.setState({
            params: { ...params }
        })
    }
    async handleSearch(accountId) {
        const responseData = await getFundCardPayMentList({ accountId });
        if (responseData.code === '000000') {
            this.setState({
                dataInsure: responseData.data
            })
        } else if (responseData.message) {
            message.error(responseData.message);
        }
    }
    render() {
        const { dataInsure } = this.state;
        const { accountDetail } = this.props;
        const columns = [
            {
                title: '账务日期',
                dataIndex: 'arriveDate',
                title: (sortOrder) => {
                    return <Text className={styles['special-text']}>账务日期</Text>
                }
            },
            {
                title: '缴纳年月',
                dataIndex: 'payYearMonth',
                title: (sortOrder) => {
                    return <Text className={styles['special-text']}>缴纳年月</Text>
                }
            },
            {
                title: '状态',
                dataIndex: 'serviceType',
                title: (sortOrder) => {
                    return <Text className={styles['special-text']}>状态</Text>
                }
            },
            {
                title: '转入/转出',
                dataIndex: 'addAmount',
                title: (sortOrder) => {
                    return <Text className={styles['special-text']}>转入/转出</Text>
                },
                render(text, record) {
                    return <>
                        <span style={{ color: 'green' }}>{text} </span>
                        /
                        <span style={{ color: '#f00' }}> {record.reduceAmount}</span>
                    </>
                }
            },
            {
                title: '金额',
                dataIndex: 'balance',
            }
        ];
        return <div className={styles.modalCont}>
            <Row style={{ paddingBottom: '10px' }}>
                <Col span={5}>是否主卡：<span className={styles['special-text']}>{accountDetail.isMainAccount > 0 ? '是' : '否'}</span></Col>
                <Col span={5}>绑卡状态：<span className={styles['special-text']}>{accountDetail.fundState}</span></Col>
                <Col span={7}>绑卡时间：<span className={styles['special-text']}>{accountDetail.boundTime}</span></Col>
                <Col span={7}>更新时间：<span className={styles['special-text']}>{accountDetail.lastRefreshDate}</span></Col>
            </Row>
            <Descriptions >
                <Descriptions.Item>
                    <Row>
                        <Col span={10}>用户ID</Col>
                        <Col span={14} className={styles['special-text']}>{accountDetail.userId}</Col>
                    </Row>
                    <Row>
                        <Col span={10}>姓名：</Col>
                        <Col span={14} className={styles['special-text']}>{accountDetail.name}</Col>
                    </Row>
                    {/* <Row>
                        <Col span={10}>年龄：</Col>
                        <Col span={14} className={styles['special-text']}>{accountDetail.f}</Col>
                    </Row>
                    <Row>
                        <Col span={10}>性别：</Col>
                        <Col span={14} className={styles['special-text']}>{accountDetail.f}</Col>
                    </Row> */}
                    <Row>
                        <Col span={10}>缴费基数：</Col>
                        <Col span={14} className={styles['special-text']}>{accountDetail.payBase}</Col>
                    </Row>
                    <Row>
                        <Col span={10}>增加金额</Col>
                        <Col span={14} className={styles['special-text']}>{accountDetail.addAmount}</Col>
                    </Row>
                    <Row>
                        <Col span={10}>余额</Col>
                        <Col span={14} className={styles['special-text']}>{accountDetail.balance}</Col>
                    </Row>
                    <Row>
                        <Col span={10}>缴费公司：</Col>
                        <Col span={14} className={styles['special-text']}>{accountDetail.payCompanyName}</Col>
                    </Row>
                    <Row>
                        <Col span={10}>状态：</Col>
                        <Col span={14} className={styles['special-text']}>{accountDetail.status > 0 ? '正常' : '已解绑'}</Col>
                    </Row>
                </Descriptions.Item>
                <Descriptions.Item >
                    <Table columns={columns} dataSource={dataInsure} size="small" scroll={{ y: 400 }} rowKey={(record) => record.id} />
                </Descriptions.Item>
            </Descriptions>
        </div>
    }
}
export default EditableTable;